<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>桌牌码</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
	</head>
	<style type="text/css">
		/*移动端1px下边线*/
		body{background: #0D6FB8;text-align: center;}
		body img{width:7.1rem;height: auto;}
		.border{ position: relative; }
		.border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color:  #efefef; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
		.container{height: 10rem;width: 7.1rem;margin: 0.3rem auto;background: #fff;border-radius: 7px;}
		.codeHead{height: 1.17rem;background: #fafafa;border-radius: 7px 7px 0 0;font-size: 0.34rem;color: #0D6FB8;}
		.codeCont{height: 5.78rem;width: 6.53rem;margin: 0 auto;text-align: center;}
		.codeCont img{width:4.7rem;height: auto;margin: 0 0;}
		.codebottom{height: 1.36rem;}
		.icon{height: 1rem;width: 1.5rem;font-size: 0.2rem;color: #878787;text-align: center;margin-top: 0.24rem;margin: 0 0.3rem;}
		.icon img{width: 0.6rem;height: auto;}
		.paytype{height: 1.26rem;font-size: 0.3rem;}
		.imgbox{height: 0.66rem;width: 5.6rem;margin: 0.24rem auto;}
		.imgbox img{height: 0.6rem;width: auto;margin: 0 0.1rem;}
		.Preservation{height: 1.11rem;width: 7.1rem;margin: 0.5rem auto;font-size: 0.34rem;background: #fff;border-radius: 5px;}
		.canvas{height: 100%;width: 100%;}
	</style>
	<body>
		<div id="tableCode">
			<!--模板tableCode_template-->
		</div>
	</body>
	<script type="text/html" id="tableCode_template">
		<!--内容开始-->
		<div class="container" id="shareBody">
			<div class="codeHead flex flex-align-center">
				<p style="margin-left: 0.32rem;"><%= data.merchantName %></p>
			</div>
			<div class="codeCont border">
				<img src="http://www.uniao.me/<%= data.dueCode %>"/>
				<p style="font-size: 0.34rem;color: #0D6FB8;margin-top: -0.2rem;">支持信用卡支付</p>
				<p style="font-size: 0.26rem;color: #878787;">(二维码长期有效)</p>
			</div>
			<div class="codebottom flex flex-align-center flex-pack-center">
				<div class="icon">
					<img src="img/code-s.png" alt="" />
					<p>1.扫码支付</p>
				</div>
				<div class="icon">
					<img src="img/code-c.png" alt="" />
					<p>2.输入金额</p>
				</div>
				<div class="icon">
					<img src="img/code-w.png" alt="" />
					<p>3.确认并支付</p>
				</div>
			</div>
			<!--支持支付方式-->
			<div class="paytype">
				<p style="margin-left: 0.3rem;text-align: left;">支持支付方式</p>
				<div class="imgbox">
					<img src="img/code-wx.png" alt="" />
					<img src="img/code-z.png" alt="" />
					<img src="img/code-bd.png" alt="" />
					<img src="img/code-qq.png" alt="" />
					<img src="img/code-jd.png" alt="" />
					<img src="img/code-yl.png" alt="" />
				</div>
			</div>
		</div>
		<div class="Preservation flex flex-align-center flex-pack-center">
			<p>保存二维码到相册</p>
		</div>
	</script>
	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/template.js"></script>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/html2canvas.js"></script>
	<script type="text/javascript" src="js/canvas2image.js"></script>
	<script type="text/javascript" src="js/layer.js"></script>
	<script type="text/javascript">
		Public.login(function(res){
			console.log(res);
			if(res.data.autentList.length==0){
						layer.open({
						  content: '未提交实名资料',
						  btn: ['去提交','取消'],
						  shadeClose: false,
						  yes: function(index){
						  	  Util.jump('Auth.html');
      						  layer.close(index);
						  }
					});
			}else{
				html = template.render("tableCode_template", res);
				$("#tableCode").html(html);
					//canvas转为img
				function convertCanvasToImage(canvas) {
					　　//新Image对象，可以理解为DOM 
					　　var image = new Image();
					　　// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持 
					　　// 指定格式 PNG 
					　　image.src = canvas.toDataURL("image/png"); 
					　　return image; 
				}	
				$('.Preservation').click(function(){
					var w = $("#shareBody").width();
				    var h = $("#shareBody").height();
				    //要将 canvas 的宽高设置成容器宽高的 2 倍
				    var canvas = document.createElement("canvas");
				    canvas.width = w*2;
				    canvas.height = h*2;
				    canvas.style.width = w + "px";
				    canvas.style.height = h + "px";
				    var context = canvas.getContext("2d");
				    //然后将画布缩放，将图像放大两倍画到画布上
				    context.scale(1.9,1.8);
				    html2canvas(document.querySelector("#shareBody"), {
				      canvas: canvas,
				      onrendered: function (canvas) {
				      	var img=convertCanvasToImage(canvas);
							$('body').html('');
							$('body').html(img);
							$('img').css('margin-top','1rem');
					      	layer.open({
								content: '长按保存到相册',
								skin: 'msg',
								time: 3 //2秒后自动关闭
							});	
				      }
				      });
				});
			}
		});
	</script>
</html>
